<template>
	<view class="page">
		<view class="head" :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			<image src="https://cdn.oss.bon-top.cn/static_bc/images/tuan_bg.png" class="bg_img"
				:style="{ height: selectData.bgImgHeight + 'px', width: selectData.screenWidth + 'px' }"
				mode="widthFix">
			</image>
			<view class="back_box" :style="{ height: selectData.navBarHeight + 'px' }">
				<!-- 状态栏 -->
				<view class="null"
					:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
				</view>
				<!-- 返回 -->
				<view class="back"
					:style="{ top: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px', height: selectData.navBarHeightTitle + 'px' }">
					<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
						mode="aspectFit">
					</image>
					<text class="text ft-32 fw-800 c-33">{{
						'拼团返现'
					}}</text>
					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
				<view class="headerContent"
					:style="{ width: selectData.screenWidth + 'px', height: (selectData.navBarHeight - selectData.headItem) + 'px' }">
					<view class="header_box_slot">
						<view class="rule flex-center" @click.stop="goRule()">
							<view class="ft c-33">查看规则</view>
							<image class="wh-22 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png">
							</image>
						</view>
						<view class="tabList flex ml-30 mt-30">
							<view :class="{ active: currentTab === item.id }" class="tab ft flex-center mr-20"
								v-for="item in tabList" :key="item.id" @click.stop="slectTab(item.id, item.name)">{{
									item.name }}</view>
						</view>
					</view>
				</view>

			</view>

		</view>


		<view :style="{ height: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }">
		</view>

		<view class="productList">
			<view class="product flex pd-20 mb-20" v-for="item in productList" :key="item.id"
				@click.stop="goPage('/subpackage/immigration/immigration?id=' + item.id)">
				<image class="img" :src="item.cover" mode="aspectFill" style="flex-shrink: 0;"></image>
				<view class="des ml-20 ">
					<view class="flex te-wid">
						<view class="tipList flex ft ft-20 mr-8" v-if="item.recommends_show.length > 0"
							v-for="tag in item.recommends_show" :key="tag">
							{{ tag }}
						</view>
						<view class="ft1 title ml-8 ft-lue te-1">{{ item.name }}</view>
					</view>
					<view class="tuan flex-center mt-20">
						<view class="c-ff ft mr-8">{{ "2人成团" }}</view>
						<view class="pinde ft c-33 flex-center">{{
							"已拼" + item.buy_info.num + "份"
						}}</view>
					</view>
					<view class="price flex-bwt">
						<view class="text pd-10">
							<view class="flex">
								<text class="ft">已省</text>
								<text class="c-red ft ft-20">
									{{ item.currency_symbol }}
								</text>
								<text class="ft-num c-red ft-36 mt-10">
									{{ item.buy_info.reduce }}
								</text>
								<text class="ft ft-20 c-red">{{ "元" }}</text>
							</view>
							<view class="flex">
								<text class="c-33 ft ft-20">{{ item.currency_symbol }}</text>
								<text class="ft-num c-33 ft-36">{{ item.bc_price_show }}</text>
								<text class="ft ft-20 c-33">{{ item.bc_price_unit }}</text>
								<text
									style="display: inline-block;height: 30rpx;width: 2rpx;background:#F1F1F1 ;margin: 0 10rpx;"></text>
								<text class="c-99 ft-line ft ft-20">{{
									item.currency_symbol
								}}</text>
								<text class="ft-num ft-line c-99 ft-32">{{
									item.old_price_show
								}}</text>
								<text class="ft ft-20 c-99">{{ item.old_price_unit }}</text>
							</view>
						</view>
						<view class="btn flex-center ft" @click.stop="goOrder(item.show_spec_id)"> 去开团 </view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 68rpx;"></view>
	</view>
</template>

<script setup lang="js">
import { onLoad, onReady, onReachBottom } from '@dcloudio/uni-app'
import { ref, reactive, onMounted } from "vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";

const tabList = [
	{ id: 1, name: '全部' },
	{ id: 2, name: '移民' },
	{ id: 3, name: '教育' }]
const goRule = () => {
	let data = {
		img: 'https://cdn.oss.bon-top.cn/static_bc/images/shareBan.png',
		html: '规则'
	}
	uni.navigateTo({ url: '/subpackage/rule/ruleList?data=' + JSON.stringify(data) })
}
const goPage = (url) => {
	uni.navigateTo({ url: url })
}
const productPage = ref(1)
const productList = ref([])
const productLoading = ref(true)
const cateName = ref('')

const getBenefitGroupBuyListData = () => {
	if (!productLoading.value) {
		return
	}
	productLoading.value = false
	utils
		.request(
			api.getBenefitGroupBuyList, {
			page: productPage.value,
			pageSize: 5,
			cate_name: cateName.value
		},
			"get"
		)
		.then((res) => {
			productPage.value++
			if (res.data.items.length > 0) {
				productList.value = productList.value.concat(res.data.items)
				productLoading.value = true
			}
		});
}
const goBack = () => {
	uni.navigateBack(-1)
}

const goOrder = (spec_id) => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/orderPreview?spec_id=" + spec_id,
	});
}

const currentTab = ref(1)

const slectTab = (id, name) => {
	currentTab.value = id;
	if (name === '全部') {
		cateName.value = ''
	} else {
		cateName.value = name;
	}

	productPage.value = 1
	productList.value = []
	productLoading.value = true

	getBenefitGroupBuyListData()
}

onMounted(() => {
	getBenefitGroupBuyListData()
})

onReachBottom(() => {
	getBenefitGroupBuyListData()
})

const selectData = ref({})
onReady(async () => {
	// 计算宽高比
	let aspectRatio = ((572 / 2) / 370) * 100

	const systemInfo = uni.getSystemInfoSync()
	let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
	let navBarHeight = parseInt(((screenWidth * aspectRatio) / 100));//导航总高+tabber
	selectData.value = {
		// headHeight: navHeight,
		screenWidth: screenWidth,
		statusBarHeight: statusBarHeight,
		navBarHeight: navBarHeight + (132 / 2),//导航总高
		bgImgHeight: navBarHeight,//背景图高度
		navBarHeightTitle: navHeight,//导航文字模块总高
		headItem: statusBarHeight + navHeight,
		menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,
	}
})
</script>

<style lang="scss" scoped>
.head {
	// height: 572rpx;
	// // height: 750rpx;
	// background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/tuan_bg.png");
	// background-size: 100% 100%;
	// background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/shareHead.png');
	// background-size: 100% 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// background: red;

	// z-index: 2;
	.bg_img {
		position: absolute;
		z-index: 0;
	}

	.null {
		width: 100%;
		height: 88rpx;
	}

	.back_box {
		position: relative;

		.bg {
			height: 290rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(180deg, #FFF3EC 0%, rgba(251, 255, 223, 0) 100%);
		}

		.back {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.text {
				width: 366rpx;
				text-align: center;

			}
		}

		.icon {
			width: 28rpx;
			height: 48rpx;
			margin-left: 30rpx;
			margin-right: auto;
		}

		.headerContent {
			.header_box_slot {
				height: calc(396rpx + (132rpx / 2));

				.tabList {
					position: absolute;
					bottom: 30rpx;
				}
			}

			position: absolute;
			bottom: 0;
			left: 0;
			// height: 112rpx;

			.rule {
				margin-left: 596rpx;
				margin-top: 30rpx;
				width: 154rpx;
				height: 52rpx;
				background: #ffffff;
				border-radius: 40rpx 0rpx 0rpx 40rpx;
				opacity: 0.5;
			}

		}
	}



}

.tab {
	width: 96rpx;
	height: 72rpx;
	background: #f8f8f8;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	color: #666666;
}

.active {
	color: #333333;
	background: #dbf046;
}

.productList {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;

	.product {
		width: 100%;
		height: 314rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #f1f1f1;
		box-sizing: border-box;

		.img {
			width: 222rpx;
			height: 274rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

		.des {
			flex: 1;
			// background-color: red;
			box-sizing: border-box;
			overflow: hidden;

			.tipList {
				display: inline-block;
				height: 36rpx;
				line-height: 36rpx;
				box-sizing: border-box;
				background: linear-gradient(89deg, #dbf046 0%, #ffee7e 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				box-sizing: border-box;
				padding: 0 4rpx;
			}

			.title {
				// width: 200rpx;
				flex: 1;
			}

			.tuan {
				width: 216rpx;
				height: 46rpx;
				background: #333333;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				.pinde {
					width: 106rpx;
					height: 38rpx;
					background: linear-gradient(90deg,
							#dbf046 0%,
							#c8fa93 66%,
							#bfffbb 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}

			.price {
				margin-top: 32rpx;
				width: 408rpx;
				height: 102rpx;
				background: linear-gradient(87deg,
						#fff5f3 0%,
						rgba(255, 245, 243, 0) 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.text {
					max-width: 280rpx;
					width: fit-content;
					overflow: hidden;
				}

				.btn {
					flex-shrink: 0;
					width: 124rpx;
					height: 78rpx;
					background: linear-gradient(87deg, #dbf046 0%, #bfffbb 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}
	}
}
</style>